<script setup lang="ts">
import { imagePath } from '@/libs/file-utils'
import { showUnlockMask, isAfford, confirm } from './data'
import { lockedStatus } from '../data'

const img_btn = imagePath('community/friend/detail/btn-unlock.png')
</script>

<template>
  <MaskWrapper v-model:show="showUnlockMask">
    <div
      class="unlock-mask"
      :class="{ active: showUnlockMask }"
      @click.stop=""
    >
      <div class="title">支付蒜瓣</div>
      <div
        v-if="lockedStatus?.itemId === 0"
        class="info"
      >
        <div class="icon"></div>
        使用1次会员权益解锁
      </div>
      <div
        v-else
        class="info"
      >
        <div class="icon"></div>
        支付{{ lockedStatus?.price }}颗蒜瓣解锁
      </div>

      <div
        class="btn"
        :style="{ backgroundImage: img_btn }"
        @click="confirm"
      >{{ isAfford ? '解锁详情版报告' : '去充值' }}</div>
    </div>
  </MaskWrapper>
</template>

<style lang="less" scoped>
.unlock-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(100%);

  width: 750rpx;
  height: 492rpx;

  border-radius: 16rpx 16rpx 0 0;
  background-color: #fff;

  transition: transform .3s;

  z-index: 2;

  &.active {
    transform: translateY(0);
  }

  .title {
    margin-top: 52rpx;

    color: #1F0337;
    text-align: center;
    font-size: 48rpx;
    line-height: 32rpx;
  }

  .info {
    width: 686rpx;
    height: 160rpx;

    margin: 32rpx auto;

    box-sizing: border-box;
    padding: 0 32rpx;

    border-radius: 32rpx;
    background-color: #FEF0FF;
    box-shadow: 0 4rpx 8rpx 0 rgba(116, 61, 167, .46);

    display: flex;
    align-items: center;

    color: #1F0237;
    font-size: 40rpx;

    .icon {
      width: 32rpx;
      height: 32rpx;

      margin-right: 32rpx;

      box-sizing: border-box;
      border: 2rpx solid #8B41FF;
      border-radius: 50%;
    }
  }

  .btn {
    width: 557rpx;
    height: 131rpx;

    margin: 0 auto;

    color: #fff;
    font-size: 48rpx;
    line-height: 124rpx;
    text-align: center;
  }
}
</style>